<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">

            <el-col :span="6">
                <el-form-item label="模版名称:" prop="templateName">
                    <el-input v-model="queryParams.templateName" clearable placeholder="请输入模版名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="模版类型:" prop="templateClassification">
                    <el-select v-model="queryParams.templateClassification" clearable>
                        <el-option v-for="dict in dict.type.other_contract_template_type" :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="客户名称:" prop="customerNames">
                    <el-input v-model="queryParams.customerNames" clearable placeholder="请输入客户名称"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="审核状态:" prop="approvalStatus">
                    <el-select v-model="queryParams.approvalStatus" clearable>
                        <template v-for="dict in dict.type.approval_status">
                            <el-option :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="启用状态:" prop="enablingStatus">
                    <el-select v-model="queryParams.enablingStatus" clearable>
                        <template v-for="dict in dict.type.sys_enable_status">
                            <el-option :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="创建人:" prop="createBy">
                    <el-input v-model="queryParams.createBy" clearable placeholder="请输入创建人"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="创建时间:" prop="startTime">
                    <el-date-picker
                        v-model="timeRange"
                        type="daterange"
                        align="left"
                        unlink-panels
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        @change="changeTime"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>

        </SearchContent>

        <div class="card-wrap paddingAll20" :model="queryParams" label-width="86px">
            <div class="table-title-wrap justify-end">
                <el-button v-hasPermi="['contractTemplate:company:add']" type="primary" size="mini" @click="addContractTemplate">新增模版
                </el-button>
            </div>


            <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" border>
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px" fixed="left">
                        <template slot-scope="scope">
                            <e-button v-hasPermi="['contractTemplate:company:detail']" size="mini" type="text" @click="handleOperate(1,scope.row)"
                            >查看
                            </e-button>
                                <e-button v-hasPermi="['contractTemplate:company:commitApproval']" size="mini" type="text" @click="handleOperate(2,scope.row)" v-if="scope.row.approvalStatus==0"
                                >提交审批
                                </e-button>
                                <e-button v-hasPermi="['contractTemplate:company:edit']" size="mini" type="text" @click="handleOperate(3,scope.row)" v-if="scope.row.approvalStatus==0||(scope.row.approvalStatus==2&&scope.row.enablingStatus==2)"
                                >编辑
                                </e-button>

                            <e-button v-hasPermi="['contractTemplate:company:void']" v-if="scope.row.approvalStatus==0||scope.row.approvalStatus==3||(scope.row.approvalStatus==2 && scope.row.enablingStatus==2)" size="mini" type="text" @click="handleOperate(4,scope.row)"
                            >作废
                            </e-button>
                            <template v-if="scope.row.approvalStatus==2">

                                <e-button v-hasPermi="['contractTemplate:company:enable']" v-if="scope.row.enablingStatus==2" size="mini" type="text" @click="handleOperate(5,scope.row)"
                                >启用
                                </e-button>
                                <e-button v-hasPermi="['contractTemplate:company:disable']" v-else size="mini" type="text" @click="handleOperate(6,scope.row)"
                                >禁用
                                </e-button>
                                <e-button   v-hasPermi="['contractTemplate:customer:managerCustomer']" v-if="scope.row.isCustomerTemplate==1" size="mini" type="text" @click="handleOperate(7,scope.row)"
                                >管理客户
                                </e-button>
                            </template>

                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="审核状态" align="center" prop="approvalStatus" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{row}">
                            <dict-tag :options="dict.type.approval_status" :value="row.approvalStatus"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="启用状态" align="center" prop="enablingStatus" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{row}">
                            <span v-if="row.enablingStatus ==0">--</span>
                            <span v-else class="enableStatus" :class="{active:row.enablingStatus ==2}">{{ row.enablingStatus == 2 ? '禁用' : '启用' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="模版名称" align="center" prop="templateName" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{row}">
                            <e-button class="enable-text-select" size="mini" type="text" @click="handleOperate(1,row)"
                            >{{row.templateName}}
                            </e-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="模版类型" align="center" prop="templateClassification" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{row}">
                            <dict-tag :options="dict.type.other_contract_template_type" :value="row.templateClassification"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="关联客户" align="center" prop="customerNames" min-width="120px" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="开始生效额度申请" align="center" prop="applicationNo" min-width="120px" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="是否客户模版" align="center" prop="isCustomerTemplate" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{row}">
                            <dict-tag :options="dict.type.business_yes_no" :value="row.isCustomerTemplate"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建人" align="center" prop="createBy" min-width="120px" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center" prop="createTime" min-width="120px" show-overflow-tooltip/>
                </template>
            </table-page>
        </div>
       <manager-customer ref="mangerCustomer" :view-type="1" @success="handleQuery"></manager-customer>
    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import * as contractTemplateApi from "@/api/contractTemplate/otherContractTemplate"
import {enableVerify} from "@/api/contractTemplate/otherContractTemplate";
import ManagerCustomer from "@/views/contractTemplate/components/ManagerCustomer.vue";

export default {
    name: "OtherContractTemplate",
    components: {
        ManagerCustomer,
        SearchContent,
    },
    dicts: ['other_contract_template_type', 'approval_status','sys_enable_status','business_yes_no'],
    data() {
        return {
            // 遮罩层
            loading: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                templateName: null,
                templateClassification:null,
                customerNames:null,
                approvalStatus: null,
                enablingStatus: null,
                createBy: null,
                startTime: null,
                endTime: null,

            },
            timeRange: [],
            total: 0,
            dataList: [],
        };
    },
    mounted() {
        this.getList()
    },
    activated() {
        this.getList()
    },
    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true;
            contractTemplateApi.contractTemplateList(this.queryParams).then(res => {
                this.dataList = res.rows;
                this.total = res.total;
            }).finally(() => {
                this.loading = false
            })

        },
        // 创建时间发生改变
        changeTime(val) {
            this.queryParams.startTime = val[0]
            this.queryParams.endTime = val[1]
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.$refs?.queryForm?.resetFields();
            this.queryParams.startTime=null
            this.queryParams.endTime=null
            this.timeRange = []
            this.handleQuery();
        },

        /** 新增操作 */
        addContractTemplate() {
            this._toPage({
                name: 'OtherTemplateAdd',
            })
        },

        handleOperate(type, row) {
            switch (type) {
                case 1://查看
                    this._toPage({
                        name: 'OtherTemplateDetail',
                        query:{
                            id:row.id
                        }
                    })
                    break
                case 2://提交审批
                     this.commitApproval(row)
                    break
                case 3://编辑
                    this._toPage({
                        name: 'OtherTemplateEdit',
                        query:{
                            id:row.id
                        }
                    })
                    break
                case 4://作废
                    this.deleteRow(row)
                    break
                case 5://启用
                    // this.changeStatus(row, 1)
                    this.enableTemplate(row)
                    break
                case 6://禁用
                    this.changeStatus(row, 2)
                    break
                case 7://管理客户
                    const customerIds = row.relatedCustomers?.split(',')
                  this.$refs.mangerCustomer.show('', row.id, customerIds)
                    break
            }
        },
        commitApproval(row){
            this.$confirm(`确定将合同模版[${row.templateName}]发起审批吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                contractTemplateApi.initiateApproval(row.id).then(res => {
                    this.handleQuery()
                    this.$message.success('发起审批成功')
                })
            })
        },

        // 启用
        enableTemplate(row){
            contractTemplateApi.enableVerify(row.id).then(res=>{
                if(res.data) {
                    this.changeStatus(row,1);
                }else {
                    this.$confirm(res.msg, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        contractTemplateApi.contractTemplateEnable({
                            id: row.id,
                        }).then(res => {
                            this.handleQuery()
                            this.$message.success('操作成功')
                        })
                    })
                }
            })
        },

        // 启用|停用
        changeStatus(row, status) {
            this.$confirm(`确定${status == 1 ? '启用' : '禁用'}吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                if (status == 1) {
                    contractTemplateApi.contractTemplateEnable(row.id).then(res => {
                        this.handleQuery()
                        this.$message.success('启用成功')
                    })
                }else  if(status == 2) {
                    contractTemplateApi.contractTemplateDisable(row.id).then(res => {
                        this.handleQuery()
                        this.$message.success('禁用成功')
                    })
                }

            })

        },
        deleteRow(row) {
            this.$confirm('此操作将作废该合同模版, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                contractTemplateApi.contractTemplateDelete(row.id).then(res => {
                    this.handleQuery()
                    this.$message.success('作废成功')
                })
            })
        }

    }
};
</script>
